<template>
  <div class="page-tools">
    <el-row type="flex" justify="space-between">
      <el-col>
        <div class="before">
          <slot />
        </div>
      </el-col>
      <el-col>
        <el-row type="flex" justify="space-between">
          <el-select v-if="showSelect" v-model="value">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-input v-model.trim="filterValue" placeholder="请输入关键字" />
          <el-button @click="filterList">筛选</el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { agentsList } from '@/api/agents'
export default {
  props: {
    showSelect: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      options: [],
      options1: {
        id: '',
        value: '选项1',
        name: '全部经纪'
      },
      value: '',
      filterValue: ''
    }
  },
  async created() {
    const res = await agentsList()
    this.options = [this.options1, ...res.data]
  },
  methods: {
    filterList() {
      this.$emit('filterValue', this.filterValue, this.value)
    }
  }
}
</script>

<style>

</style>
